<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control" />
    <meta content="no-cache" http-equiv="Pragma" />
    <meta content="0" http-equiv="Expires" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="../styles/base.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/font/iconfont.css" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/layui/layui.js"></script>
    <script type="text/javascript" src="../js/layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/common/common.js"></script>
    <script type="text/javascript" src="../js/common/utils.js"></script>
    <script type="text/javascript" src="../js/common/myAjax.js"></script>
    <script type="text/javascript" src="../js/common/publicClass.js"></script>
    <style>
        body {
            background: #ddecf5;
            overflow: hidden;
        }

        .searchContainer {
            height: 90%;
            margin-top: 10px;
            min-width: 94%;
            margin-left: 3%;
        }

        .headerTitle .layui-form {
            width: 300px;
            margin-left: 0px;
            height: 40px;
        }

        .headerTitle .layui-form-item {
            margin-bottom: 15px;
            clear: none;
            zoom: 1;
        }

        .headerTitle span {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }

        .mastTip {
            color: red;
            margin-right: 5px;
        }

        .formTitle {
            float: left;
            height: 40px;
            line-height: 40px;
        }

        .header {

            margin-top: 10px;
            /*    border-bottom: 2px solid #ccc;
            padding-bottom: 10px;*/
        }

        .checkBoxClass {
            float: left;
            width: 300px;
            display: none;
        }

        .checkText {
            margin-top: 10px;
            margin-left: 110px;
            width: 200px;
            max-height: 120px;
            overflow-y: scroll;
            height: auto;
            border: 1px solid #ccc;
        }

        .checkText li {
            /*    float: left;*/
            width: 120px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }

        .checkText li span {
            display: inline-block;
            font-size: 14px;
        }

        .bottomBtn {
            clear: both;
            display: none;
            float: right;
            width: 50%;
        }

        .bottomBtn button {
            float: left;
            background-color: #eee;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            text-decoration: none;
            font-weight: 600;
            color: #333;
            position: relative;
            padding: 2px 15px;
            margin-right: 15px;
            margin-top: 10px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(242, 242, 242)), color-stop(1, rgb(242, 242, 242)));
            cursor: pointer;
        }

        .bottomBtn button:hover {
            color: #fff;
            background: #40E0D0;
        }

        .headerTitle,
        .checkBoxClass {
            margin-left: 15px;
        }

        .td1 {
            color: #0000FF;
            cursor: pointer;
            text-decoration: underline;
        }

        .createBox {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9999;
            /*backgeound:rgba(0,0,0,.4);*/
            background: rgba(0, 0, 0, 0.6);
            /*opacity:0.8;filter:Alpha(opacity=80);*/
            display: none;
        }

        .createBoxBG {
            position: fixed;
            width: 400px;
            height: 300px;
            left: 50%;
            top: 100px;
            margin-left: -200px;
            /*    margin-top:-150px;*/
            background: #fff;
            /*opacity:1;filter:Alpha(opacity=100);*/
        }

        .closeBOXDig {
            position: fixed;
            left: 50%;
            padding: 4px 5px;
            background: #ccc;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-left: 200px;
            top: 80px;
        }

        .layui-laypage .layui-laypage-limits,
        .layui-laypage .layui-laypage-refresh {
            vertical-align: top;
            display: none;
        }

        .inputBox {
            float: right;
            width: 200px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            padding-right: 10px;
            position: relative;
        }
		
		
		
		
		.searchContainer a{
		color:#0054DC !important
		}
		.searchContainer .header{
		padding:20px 10px;
		}
		
    </style>

</head>

<body>
    <div id="loading">
        <img src="../styles/img/loading.gif" />
    </div>
    <div class="createBox">
        <span class="closeBOXDig">关闭</span>
        <div class="createBoxBG"> </div>
    </div>
    <div class="searchContainer">
        <div class="header">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="mastTip">*</span><span>物料分类:</span></label>
                        <div class="layui-input-block layui-form" lay-filter="divAVL">
                            <select id="materialSelect" lay-verify="" lay-filter="AVLClass">
                                <option value="">请选择物料分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="mastTip">*</span><span>二级分类:</span></label>
                        <div class="layui-input-block layui-form" lay-filter="divsub">
                            <select id="subSelect" lay-verify="required" lay-filter="subClass">
                                <option value="">请选择二级分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="mastTip">*</span><span>成品编号:</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="productNumber" lay-verify="required"
                                class="layui-input productNumber" />
                        </div>
                    </div>               
                <div class="layui-inline">
                    <button type="button" lay-submit lay-filter="submitBtn" class="layui-btn submitBtn">确定</button>
                    <button type="reset" class="reloadBtn layui-btn">重置</button>
                </div>
				 </div>
            </form>
        </div>
        <div class="formContent">
            <table id="AVLTable" class="layui-table">

            </table>
        </div>
    </div>
</body>

<script>
    //(function () {
    layui.use(['form','table'], function () {
        var form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()		
		var table=layui.table;
		var layer = layui.layer;
		var partNum='';
        var allArrData = []; //用于存放查询的数据
        maximizeWindow(); //设置屏幕大小
        var height = document.body.clientHeight;
        var width = document.body.clientWidth;
        $("#loading img").css({
            "margin-left": width / 2 - 25 + "px",
            "margin-top": height / 2 - 25 + "px"
        })
        $("#loading").css({
            display: "block"
        });
        $(".formContent").unbind().on("click", ".td1", function () {
            $(".createBox").css({
                "display": "block"
            })
            var datav = $(this).val();
            datav == "" ? datav = "0000094754" : datav = datav;
            if (datav != undefined && datav != "") {
                var params = datav;
                if (params != "") {
                    var url = "/MaterialsApplication/tmGetMaterialsClassification",
                        data = "number=" + encodeURIComponent(params);
                    $("#loading").css({
                        display: "block"
                    });
                    MaterialReverseAjax(url, data, suCallback);
                    var height = document.body.clientHeight;
                    var width = document.body.clientWidth;
                    $("#loading img").css({
                        "margin-left": width / 2 - 25 + "px",
                        "margin-top": height / 2 - 25 + "px"
                    })
                }

                function suCallback(str) {
                    $("#loading").css({
                        display: "none"
                    });

                    if (str.datalist != undefined && JSON.stringify(str.datalist) != "{}") {
                        var dataLists = [];
                        for (var v in str.datalist) {
                            var objV = {};
                            objV.keys = v;
                            objV.val = str.datalist[v];

                            dataLists.push(objV)
                        }
                        window.historyList1 = dataLists;
                        window.headers1 = ["序号", "分类属性名称", "分类属性值"]
                        window.widths1 = [100, 200, 400];
                        // window.reportQuery="false";
                        $(".createBoxBG").empty().load('./newTable.html', "", function () {

                        });
                    } else {
                        $(".createBoxBG").empty();
                        layerFn("您查询的数据不存在！");
                    }
                }

            }
        })
        $(".closeBOXDig").click(function () {
            $(".createBox").css({
                "display": "none"
            })
        })
        MaterialReverseAjax("/Classification/readClassification", "", function (str) {
            renderForm1(str.data)
        })

        function renderForm1(str) {
            //layui.use('form', function () {
            //var form = layui.form; //高版本建议把括号去掉，有的低版本，需要加()
            var option = "";
            var dat = str;
            for (var i = 0; i < dat.length; i++) {
                option += '<option value="' + dat[i] + '">' + dat[i] + '</option>'
            }
            $("#materialSelect").append(option);
            form.render('select', 'divAVL');
            $("#loading").css({
                display: "none"
            });
            form.on('select(AVLClass)', function (data) {
                $(".checkHeader input").removeProp("checked", "checked")
                $(".checkBoxClass .checkText").remove();
                var classType = data.value;
                $("#loading").css({
                    display: "block"
                }); //得到被选中的值
                // classTypeName=classType;
                var param = "param=" + classType
                MaterialReverseAjax("/Classification/readClassificationSon", param, function (
                    str) {
                    $("#loading").css({
                        display: "none"
                    });
                    var classList = [];
                    var classList = str.data;
                    /*  for(var m=0;m<dat.length;m++){
                          if(dat[m]==data.value){
                              classList=dat[m].datalist;
                          }
                      }*/
                    //$(".formContent").css("display","block");
                    $(".bottomBtn").css("display", "block");
                    if (classList.length > 0) {
                        var classText = "";
                        for (var n = 0; n < classList.length; n++) {
                            classText += '<option value=' + classList[n] + '>' +
                                classList[n] + '</option>';
                        }
                        $("#subSelect").append(classText);
                        form.render('select', 'divsub');
                        // $(".checkBoxClass").append(classText).css({
                        //     "display": "block"
                        // });
                    }
                })
            });
            form.render('select', 'divsub');
            //});
        }

        form.on("submit(submitBtn)", function () {
            var otext = $("#subSelect").val();
            window.open("ClassifiedAttributeQuery.html?classificationName=" + encodeURIComponent(
                    otext) +
                "&parentNumber=" + encodeURIComponent($('.productNumber').val()));
        })
        window.backTable = function (param) {
		partNum=param;
            table.render({
                elem: '#AVLTable',
                cols: [
                    [{
                            type: 'numbers'
                        },                        
                        {
                            field: 'material',
                            title: '物料分级',
                            width: 300
                        },
                        {
                            field: 'partNumber',
							templet:function(p){
							return '<a href="javascript:void(0)" class="partnumber">'+param+'</a>'
							},
                            title: '物料编码'
                        }
                    ]
                ],
                // data: tableData
                data: [{
                        'material': $("#subSelect").val(),
                        'partNumber': param                       
                    }
                ],
                done: function (res) {
                   
                }
            })

        }

$(".searchContainer").off()
.on('click','.partnumber',function(){
$.ajax({
url:'/Classification/getWTPartUrlByNumber',
type:'post',
contentType:'application/json',
data:JSON.stringify({
'partNumber':partNum
}),
success:function(res){
console.log(res.partUrl)
},error:function(res){
alert(res.message);
}
})
    })
</script>

</html>